<#import "/includes/layout.html" as defaultLayout>
	<@defaultLayout.layout>
<div class="layui-fluid">
			<div class="layui-card">
				<div class="layui-card-header layuiadmin-card-header-auto">
					<form id="searchForm" class="layui-form" lay-filter="searchForm">
						<div class="layui-form-item">
							<div class="layui-inline">
								<div class="layui-input-inline">
									<input class="layui-input" name="title" autocomplete="off" placeholder="输入关键字" />
								</div>
							</div>
							<div class="layui-inline">
								<button class="layui-btn" lay-submit lay-filter="searchForm"><i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>查询</button>
								<button type="button" class="layui-btn layuiadmin-btn-list layui-btn-primary"  data-type="clean">
									<i class="layui-icon layui-icon-refresh layuiadmin-button-btn"></i>重置</button>
							</div>
						</div>
					</form>
				</div>
				<div class="layui-card-body">
					 <div id="main" class="main"></div>
				</div>
			</div>
		</div>
<style type="text/css">
.main {
    height: 400px;
    /*width: 778px !important;*/
    overflow: hidden;
    padding : 10px;
    margin-bottom: 10px;
    border: 1px solid #e3e3e3;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
       -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
</style>
<script src="${_context}/static/echarts/echarts.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	var myChart = echarts.init(document.getElementById('main')); //  初始化
	layui.extend({
		index: 'lib/index' //主入口模块
	}).use(['index', 'select', 'form', 'dialoger'], function () {
		var $ = layui.jquery,
			form = layui.form,
			dialoger = layui.dialoger,
			select = layui.select;
			$.getJSON('${_context}/api/sys/chart/data?id=${vo.id}',function(res){
				if(res.error == '0'){
					readerChart(res.data);
				}else{
					dialoger.alertError(res.message);
				}
			});
	});

	function readerChart(option){
		var defaults = {
			title : { text: '一般折线图'},
			tooltip : {
				trigger: 'axis'
			},
			toolbox: {
				show : true,
				feature : {
					saveAsImage : {show: true}
				}
			},
			xAxis : [
				{
					type : 'category',
					boundaryGap : false,
					data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
				}
			],
			yAxis : [
				{
					type : 'value',
					axisLabel : {
						formatter: '{value} '
					}
				}
			],
			series : [{
					data: [820, 932, 901, 934, 1290, 1330, 1320],
					type: 'line'
				}
			]
		};   
		defaults.title.text = option.title;
		defaults.xAxis[0].data = option.data;
		defaults.yAxis[0].axisLabel.formatter += option.yformatter;
		defaults.series = option.series;
		myChart.setOption(defaults);      
	}
	
   
</script>
</@defaultLayout.layout>